<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例中心</title>
    <link rel="stylesheet" href="./style/global.css">
    <link rel="stylesheet" href="./style/case.css">
    
</head>
<body>
    <!-- 头部有logo和中英文切换 -->
    <header>
        <img src="./image/index/LOGO.png" alt="首页logo，联力机械" class="top_logo_img">
        <div class="lang_btn">
            <button class="lang_cn active">中文</button>
            <button class="lang_eng">English</button>
        </div>
    </header>
    <!-- 中间tab标签区域 可能有跳转事件  里面使用a标签 -->
    <div class="tab_choose">
        <a href="./index.html"> 网站首页</a>
        <a href="./about.html"> 关于联力</a>
        <a href="./news.html"> 公司动态</a>
        <a href="./about.html#rongyuzizhi"> 荣誉资质</a>
        <a href="./product.html"> 产品中心</a>
        <a href="./case.html" class="active"> 案例中心</a>
    </div>
    <!-- banner背景图片 -->
        <img src="./image/case/banner4.png" alt="案例中心" class="top_banner">
    <!-- 案例中心 -->
    <div class="case_tabcheck">
        <span class='red_line'>————</span>
        <div class="case_bar_msg">
            <span>&nbsp&nbspCASE 案例中心 &nbsp&nbsp</span>
            <span>Company news center</span>
        </div> 
        <span class='red_line'>————</span>
    </div>
    <!-- 下方的tab切换 -->
    <div class="case_tab_next ">
        <span class=" left active">成功案例</span>
        <span class="right">视频中心</span>
    </div>
    <!-- 下方的内容区域 -->
    <div class="case_box">
        <div class="case_box_msg">
            <img src="./image/case/1.png" alt="">
            <span class="case_title">普瑞森绵阳项目部</span>
            <span class="case_info_msg">机械式登车桥68台</span>
        </div>
        <div class="case_box_msg">
            <img src="./image/case/2.png" alt="">
            <span class="case_title">普瑞森绵阳项目部</span>
            <span class="case_info_msg">机械式登车桥68台</span>    
        </div>
        <div class="case_box_msg">
            <img src="./image/case/3.png" alt="">
            <span class="case_title">普瑞森绵阳项目部</span>
            <span class="case_info_msg">机械式登车桥68台</span>    
        </div>
        <div class="case_box_msg">
            <img src="./image/case/4.png" alt="">
            <span class="case_title">普瑞森绵阳项目部</span>
            <span class="case_info_msg">机械式登车桥68台</span>    
        </div>
        <div class="case_box_msg">
            <img src="./image/case/5.png" alt="">
            <span class="case_title">普瑞森绵阳项目部</span>
            <span class="case_info_msg">机械式登车桥68台</span>    
        </div>
        <div class="case_box_msg">
            <img src="./image/case/6.png" alt="">
            <span class="case_title">普瑞森绵阳项目部</span>
            <span class="case_info_msg">机械式登车桥68台</span>
        </div>
        <div class="case_box_msg">
                <img src="./image/case/7.png" alt="">
                <span class="case_title">普瑞森绵阳项目部</span>
                <span class="case_info_msg">机械式登车桥68台</span>
            </div>
            <div class="case_box_msg">
                    <img src="./image/case/8.png" alt="">
                    <span class="case_title">普瑞森绵阳项目部</span>
                    <span class="case_info_msg">机械式登车桥68台</span>
                </div>
    </div>
        <!-- 新闻内容切换想要切换可以用插件 -->
        <div class="tab_check">
            <div>首页</div>
            <div class="trans_tab active">1</div>
            <div class="trans_tab">2</div>
            <div class="trans_tab">3</div>
            <div class="trans_tab">4</div>
            <div class="dot">...</div>
            <div class="trans_tab">10</div>
            <div>下一页</div>
            <div>尾页</div>
        </div>
        <div class="list_msg">
                <div class="left">
                    <ul>
                    <li class="topmsg">关于我们</li>
                    <li><a href="./about.html#rongyuzizhi">荣誉资质</a></li>
                    <li><a href="./about.html#qiyewenhua">企业文化</a></li>
                    <li><a href="./about.html#qiyejianjie">公司简介</a></li>
                </ul>
                <ul>
                    <li class="topmsg">新闻动态</li>
                    <li><a href="./news.html">公司动态</a></li>
                    <li><a href="./news.html">行业新闻</a></li>
                </ul>
                <ul>
                    <li class="topmsg">产品中心</li>
                    <li><a href="./product.html">装卸设备</a></li>
                    <li><a href="./product.html">升降设备</a></li>
                    <li><a href="./product.html">高空作业平台</a></li>
                    <li><a href="./product.html">其他配件</a></li>
                </ul>
                <ul>
                    <li class="topmsg">成功案例</li>
                    <li><a href="./case.html">成功案例</a></li>
                    <li><a href="./case.html">视频中心</a></li>
                </ul>
                <ul>
                    <li class="topmsg">联系我们</li>
                    <li>在线咨询</li>
                </ul>
                </div>
                <div class="right">
                    <span>咨询热线：136-8801-5068向经理（重庆市场部）</span>
                    <span>187-9315-8884夏先生（西北市场部）</span>
                    <span>销售热线：136-8801-5068</span>
                    <span>地　　址：广汉市经济开发区高雄路西三段22号</span>
                </div>
        </div>
        <!-- 最底部的信息 -->
        <div class="botton_info">
            <div class="left">
                    网站首页  |  关于联力  |  公司动态  | 荣誉资质  |  产品中心  |  案例中心 
            </div>
            <div class="right">技术支持：成都诗昱晞科技有限公司</div>
        </div>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/case.js"></script>
</body>
</html>